<template>
  <div class="container">
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="form.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :cell-style="{ padding: '0' }"
        :row-style="{ height: '15px' }"
      >
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="skuName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="订单金额(元)" width="180">
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" width="180">
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="130">
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template>
            <span class="detail">查看详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @current-change="getOrderList"
        :current-page.sync="params.pageIndex"
        :page-size="10"
        prev-text="上一页"
        next-text="下一页"
        layout="total, prev, pager, next"
        :total="totalCount"
        background
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getOrderApi } from '@/api/order'
export default {
  name: 'DikedeIndex',

  data () {
    return {
      form: {
        user: '',
        region: ''
      },
      currentPage1: 1,
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      totalPage: 0
    }
  },
  created () {
    this.getOrderList()
  },

  mounted () {},

  methods: {
    handleCurrentChange () {
      console.log(111)
    },
    onSubmit () {
      console.log('submit')
    },
    async getOrderList () {
      try {
        const res = await getOrderApi(this.params)
        console.log(res)
        this.tableData = res.currentPageRecords
        this.totalCount = +res.totalCount
        this.totalPage = +res.totalPage
      } catch (err) {
        console.log(err)
      } finally {
        console.log(11)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail{
    color: blue;
    cursor: pointer;
}
</style>
